<%@ page language="java" import="java.util.*,org.apache.struts2.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"   %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE HTML>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="<%=basePath %>/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
	<link href="<%=basePath %>/assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    	.form-horizontal{
    		margin-top:30px;
    		margin-left:30px;
    	}
    	#upload_logo {
    		margin-top:70px;
    		margin-left:120px;
    		margin-bottom: 10px;
    		width:50%;
    	}
    	#upload_other{
    		margin-top:-30px;
    		margin-left:120px;
    		margin-bottom: 10px;
    		width:50%;
    	}
    </style> 
</head>
<body>
	<form id="J_Form" action="<%=basePath %>/Product_insert" class="form-horizontal" method="post" onsubmit="return GetSuccessUrl();">

      <div class="control-group">
        <label class="control-label"><s>*</s>产品名称:</label>
        <div class="controls">
          <input name="name" type="text" class="input-normal" data-rules="{required : true}"  >
        </div>
      </div>
      
      <div class="control-group" >
        <label class="control-label"><s>*</s>产品介绍:</label>
        <div class="controls  control-row-auto">
          <textarea name="product_introduce"  class="control-row4 input-large" data-rules="{required : true}"></textarea>
        </div>
      </div>
      
      <div class="control-group">
        <label class="control-label"><s>*</s>产品价格:</br><a></a></label>
        <div class="controls">
          <input type="text" class="input-normal" name="super_market_price" data-rules="{required : true}" >
          <a style="color:red;font-size:12px;">元</a>
          <span class="auxiliary-text">超市价格</span>
        </div>
      </div>
      
      <div class="control-group">
        <label class="control-label"><s>*</s>产品价格:</label>
        <div class="controls">
          <input name="local_price" type="text" class="input-normal" data-rules="{required : true}"  >
          <a style="color:red;font-size:12px;">元</a>
          <span class="auxiliary-text">本店价格</span>
        </div>
      </div>
      
      <div class="control-group">
        <label class="control-label"><s>*</s>产品图片:
        	<br/>
        	<span class="auxiliary-text">主页显示&nbsp;&nbsp;</span>
        </label>
        <div class="controls">
        	<img src="<%=basePath %>/assets/img/logo100x100.jpg" id="viewimg" style="width:100px;height:100px;border:1px solid #ddd;">
	      	<div id="J_Uploader_logo"></div>
      	</div>
      	<input id="img_logo" type="hidden" name="img_logo" value=""  data-rules="{required : true}" data-messages="{required:'请上传图片'}">
      </div>
      
      <div class="control-group" id="sub_sort_id_div">
        <label class="control-label"><s>*</s>属于子类:</label>
        <div class="controls  control-row-auto">
			<select id="sub_sort_select" disabled="disabled" onchange="getSelectedToSub_id()">
			</select>
        </div>
        <a onclick="getSubSort()" style="margin-left:5px;">获取资源</a>
        <input name="sub_sort_id"  type="hidden" value="" data-rules="{required : true}" data-messages="{required:'请选择子类'}" id="sub_sort_id"/>
        <span id="select_subsort_state" Style="display:none;"></span>
      </div>
      
      <div class="control-group">
        <label class="control-label"><s>*</s>属于商户:</label>
        <div class="controls  control-row-auto">
			<select id="merchant_select" disabled="disabled" onchange="getSelectedToMerchant_id()">
			</select>
        </div>
        <a onclick="getMerchant()" style="margin-left:5px;">获取资源</a>
        <input name="merchant_id"  type="hidden" value="" data-rules="{required : true}" data-messages="{required:'请选择商户'}" id="merchant_id"/>
        <span id="select_merchant_state" Style="display:none;"></span>
      </div>
      
      <div class="control-group">
        <label class="control-label"><s>*</s>是否热销:</label>
        <div class="controls">
			<input type="radio" name="is_hot" value="是"> 是
            <input type="radio" name="is_hot" value="否" checked="checked" > 否
        </div>
      </div>
      
      <div class="control-group">
        <label class="control-label"><s>*</s>产品图片集:
        	<br/>
        	<span class="auxiliary-text">产品介绍页面显示</span>
        </label>
        <div class="controls">
	      	<div id="J_Uploader_other"></div>
      	</div>
      	<input id="img_other" type="hidden" name="img_other" value="">
      </div>

      <div class="row form-actions actions-bar">
           <div class="span13 offset3 ">
             <button type="submit" class="button button-primary">提交</button>
           </div>
      </div>
      
    </form>
</body>
	<script type="text/javascript" src="<%=basePath %>/assets/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>/assets/js/bui.js"></script>
	<script type="text/javascript" src="<%=basePath %>/assets/js/config.js"></script>
    <script type="text/javascript">
		//表单验证
		var Form = BUI.Form;
		new Form.Form({
		  srcNode : '#J_Form'
		}).render();

		//上传图片
		BUI.use('bui/uploader',function (Uploader) {
			
			//带图片预览的主题
			  Uploader.Theme.addTheme('mytheme', {
			    elCls: 'imageViewTheme',
			    queue:{
			      resultTpl: {
			          'default': '<div class="default">{name}1</div>',
			          'success': '<div data-url="{url}" class="success_url"><img src="<%=basePath%>{url}" title="{name}" style="width:100%;height:100%;"></div>',
			          'error': '<div class="error"><span title="{name}">{msg}</span></div>',
			          'progress': '<div class="progress"><div class="bar" style="width:{loadedPercent}%"></div></div>'
			      }
			    }
			  });
			  
		     //产品logo上传
		     var uploader_logo = new Uploader.Uploader({
			   //给upload div 添加一个id标签
			   elAttrs :{id : 'upload_logo'},
			   //读取要放到的div
		       render: '#J_Uploader_logo',
		       //在那个元素前面
		       elBefore : '#sub_sort_id_div',
		       //获取数据地址
		       url: '<%=basePath%>/Product_JUploadProductLogo',
		       //验证文件
		       rules: {
		         //文的类型
		         ext: ['.png,.jpg','文件类型只能为{0}'],
		         //上传的最大个数
		         max: [1, '<br/>只允许上传{0}个图片,此图片将不上传!'],
		         //文件大小的最小值,这个单位是kb
		         minSize: [0, '文件的大小不能小于{0}KB'],
		         //文件大小的最大值,单位也是kb
		         maxSize: [1024, '文件大小不能大于1M']
		       },
		       multiple:false,
		       //成功返回的函数
		       isSuccess: function(res){
		       		$("#viewimg").css("display","block");
		       		$("#viewimg").attr("src","<%=basePath%>/"+res[0].url);
		       		$("#img_logo").attr("value",res[0].url);
		       		return true;
		       }
		      }).render();
		      
		      
		     //产品介绍图片集上传
		     var uploader_other = new Uploader.Uploader({
		       //指定使用主题
        	   theme: 'mytheme',
		       //给upload div 添加一个id标签
			   elAttrs :{id : 'upload_other'},
			   //给upload div 添加一个id标签
		       render: '#J_Uploader_other',
		       //在那个元素前面
		       elBefore : '.actions-bar',
		       //获取数据地址
		       url: '<%=basePath%>/Product_JUploadProductImgOther',
		       //验证文件
		       rules: {
		         //文的类型
		         ext: ['.png,.jpg','文件类型只能为{0}'],
		         //上传的最大个数
		         max: [9, '只允许上传{0}个图片,此图片将不上传!'],
		         //文件大小的最小值,这个单位是kb
		         minSize: [0, '文件的大小不能小于{0}KB'],
		         //文件大小的最大值,单位也是kb
		         maxSize: [1024, '文件大小不能大于1M']
		       }
		      }).render();
		   });
		   
         //获取子类
         function getSubSort(){
         	  //先清空
         	  $("#sub_sort_select").empty();
         	  $("#sub_sort_select").append("<option value='0'>请选择子类</option>");
         	  //加载子类
			  $.ajax({
	             type: "GET",
	             url: "<%=basePath%>/SubSort_JGetNameAndId",
	             dataType: "json",
	             beforeSend:function(XMLHttpRequest){
	             	$("#select_subsort_state").css("dispaly","block");
	             	$("#sub_sort_select").attr("disabled","disabled");
	             },
	             success: function(data){
	             	if(data.length==0){
	             		$("#select_subsort_state").css("display","block");
	             		$("#select_subsort_state").append("<a style='color:red;margin-left:10px;'>子类为空,请先添加子类!</a>");
	             	}else{
		           		for(var i=0;i<data.length;i++){
		           			$("#sub_sort_select").append("<option value ='"+data[i].id+"'>"+data[i].name+"</option>");
		           		}
	           		}
	           		$("#sub_sort_select").removeAttr("disabled");
	             },
	             error:function(XMLHttpRequest, textStatus, errorThrown){
	             		$("#select_subsort_state").css("display","block");
	             		$("#select_subsort_state").append("<a style='color:red;margin-left:10px;'>发生错误,请联系管理员!</a>");
	             }
	          });
         }
         
         //获取商户
         function getMerchant(){
              //先清空
         	  $("#merchant_select").empty();
         	  $("#merchant_select").append("<option value='0'>请选择商户</option>");
         	  //加载商户
			  $.ajax({
	             type: "GET",
	             url: "<%=basePath%>/Merchant_JGetNameAndId",
	             dataType: "json",
	             beforeSend:function(XMLHttpRequest){
	             	$("#merchant_select").attr("disabled","disabled");
	             	$("#select_merchant_state").css("dispaly","block");
	             },
	             success: function(data){
	             	if(data.length==0){
	             		$("#select_merchant_state").css("display","block");
	             		$("#select_merchant_state").append("<a style='color:red;margin-left:10px;'>商户表为空,请先添加商户!</a>");
	             	}else{
		           		for(var i=0;i<data.length;i++){
		           			$("#merchant_select").append("<option value ='"+data[i].id+"'>"+data[i].merchant_name+"</option>");
		           		}
	           		}
	           		$("#merchant_select").removeAttr("disabled");
	             },
	             error:function(XMLHttpRequest, textStatus, errorThrown){
	             		$("#select_merchant_state").css("display","block");
	             		$("#select_merchant_state").append("<a style='color:red;margin-left:10px;'>发生错误,请联系管理员!</a>");
	             }
	          });
         }
         
         //获取以选择给Root_id
         function getSelectedToSub_id(){
         	var res=$("#sub_sort_select option:selected").val();
         	if(res!=0){
         		$("#sub_sort_id").val(res);
         	}else{
         		$("#sub_sort_id").val("");
         	}
         }
         
         //获取以选择给Root_id
         function getSelectedToMerchant_id(){
         	var res=$("#merchant_select option:selected").val();
         	if(res!=0){
         		$("#merchant_id").val(res);
         	}else{
         		$("#merchant_id").val("");
         	}
         }
         
         //获取已确定上传的图片地址
         function GetSuccessUrl(){
         	var img_other_val="";
         	for(var i=0;i<$(".success_url").length;i++){
         		if(i==0){
         			img_other_val=$(".success_url:eq("+i+")").attr("data-url");
         		}else{
         			img_other_val+="|"+$(".success_url:eq("+i+")").attr("data-url");
         		}
         	}
         	$("#img_other").attr("value",img_other_val);
         	return true;
         }
	</script>
</html>
